import type { Language } from "@/locale/typing";
import type { SizeType } from "ant-design-vue/es/config-provider";
import type { TabsType } from "ant-design-vue/es/tabs/src/Tabs";

/**系统栏配置 */
export interface SystemOption {
  /**主题色 */
  themeColor: string;
  /**语言 */
  locale: Language;
}
/**侧边栏配置 */
export interface SidebarOption {
  /**固定 */
  fixed: boolean;
  /**固定logo */
  fixedLogo: boolean;
  /**宽度-px */
  width: number;
  /**收起状态 */
  collapsed: boolean;
  /**收起宽度 */
  collapsedWidth: number;
  /**未选中栏样式 */
  unSelected: {
    /**背景色 */
    backgroundColor: string;
    /**文本颜色 */
    color: string;
  };
  /**选中栏样式 */
  selected: {
    /**背景色 */
    backgroundColor: string;
    /**文本颜色 */
    color: string;
  };
}
/**顶栏配置 */
export interface HeaderOption {
  /**展示收起菜单按钮 */
  showMenuIcon: boolean;
  /**固定 */
  fixed: boolean;
  /**展示菜单路径 */
  showBreadcrumb: boolean;
  /**样式 */
  style: {
    /**背景色 */
    backgroundColor: string;
    /**字体颜色 */
    color: string;
    /**文本大小 */
    fontSize: number;
  };
}
/**内容区配置 */
export interface ContentOption {
  /**样式 */
  style: {
    /**背景色 */
    backgroundColor: string;
    /**字体颜色 */
    color: string;
  };
  /**展示底栏 */
  showBottom: boolean;
  /**路由切换动画
   * opacity-淡入淡出
   * left-从左到右
   * right-从右到左
   */
  transition: AnimationName;
}
/**标签栏 */
export interface TabsOption {
  /**固定 */
  fixed: boolean;
  /**类型 */
  type: TabsType;
  /**样式 */
  style: {
    backgroundColor: string;
  };
  /**大小 */
  size: SizeType;
  /**标签间距 */
  tabBarGutter: number;
  /**可关闭 */
  close: boolean;
  /**可刷新 */
  refresh: boolean;
}
/**主题配置 */
export interface ThemeState {
  /**菜单类型 1|2|3 */
  menu: 1 | 2 | 3;
  /**内容区key */
  key: number;
  /**搜索控件 */
  showSearch: boolean;
  /**侧边栏配置 */
  sidebar: SidebarOption;
  /**顶栏配置 */
  header: HeaderOption;
  /**内容区配置 */
  content: ContentOption;
  /**标签栏 */
  tabs: TabsOption;
  /**系统栏 */
  system: SystemOption;
}
/**动画名称 */
export type AnimationName = "opacity" | "left" | "right";
/**动画列表 */
export type AnimationOptions = {
  label: string | (() => string);
  value: AnimationName;
}[];
